<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <script src="../dist/plugin-audio-keyboard-response.js"></script>
    <script src="../dist/plugin-html-keyboard-response.js"></script>
    <script src="../dist/plugin-webgazer-init-camera.js"></script>
    <script src="../dist/plugin-webgazer-calibrate.js"></script>
    <script src="../dist/plugin-webgazer-validate.js"></script>
    <script src="js/webgazer/webgazer.js"></script>
    <script src="../dist/extension-webgazer.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
    <style>
      .jspsych-content { max-width: 100%; }
    </style>
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      extensions: [
        {type: jsPsychExtensionWebgazer}
      ],
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var preload = {
      type: jsPsychPreload,
      images: ['img/blue.png', 'img/orange.png'],
      audio: ['sound/speech_blue.mp3']
    };

    var init_camera = {
      type: jsPsychWebgazerInitCamera
    };

    var start_cal = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<p>As each dot appears, look at it and then click on it.</p><p>Press a key to start.</p>'
    };

    var calibration = {
      type: jsPsychWebgazerCalibrate,
      calibration_points: [
        [25,25],[25,75],[50,50],[75,75],[75,25]
      ]
    };

    var start_val = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<p>As each dot appears, look at it.</p><p>Press a key to start.</p>'
    };

    var validation = {
      type: jsPsychWebgazerValidate,
      validation_points: [
        [25,50],[75,50]
      ]
    };

    var start = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: 'Look at the spoken color. Press a key to start.'
    };

    var trial = {
      type: jsPsychAudioKeyboardResponse,
      stimulus: 'sound/speech_blue.mp3',
      prompt: `
        <div style="width:100vw; height:300px;">
          <img id="blue-target" style="float:left;" src="img/blue.png"></img>
          <img id="orange-target" style="float:right;" src="img/orange.png"></img>
        </div>
      `,
      choices: "NO_KEYS",
      trial_duration: 2000,
      extensions: [
        {
          type: jsPsychExtensionWebgazer, 
          params: {targets: ['#blue-target', '#orange-target']}
        }
      ]
    };

    jsPsych.run([preload, init_camera, start_cal, calibration, start_val, validation, start, trial]);

  </script>
</html>